// PIN密码 tab的内容
import { StyledPIN } from './style'
import { Form, FormItem, Password } from '@kedacom/react-next'
import React, { forwardRef } from 'react'
// import HelpView from '../Help'
import { PINViewProps } from './interface'
import useIndexHook from './indexServer'

const UpdatePINView = (props: PINViewProps, ref: React.Ref<unknown> | undefined) => {
	const { INPUT_WIDTH, formData, onInputBlur, onInputFocus, onInputChange } = useIndexHook(props, ref)
	const showCurrentPIN = props.isShowCurrentPIN === false ? false : true
	const isCurrentReadOnly = formData.newPIN && formData.newPINCheck === false ? true : false
	const isNewPINReadOnly = showCurrentPIN ? formData.currentPINCheckIcon !== 'right' : false //新密码只读的条件
	const confirmPINReadOnly = !formData.newPINCheck //确认密码只读的条件
	const isShowRememberNewPIN = props.isShowRememberNewPIN
	return (
		<StyledPIN className="pin-wrap">
			<Form className="form">
				{showCurrentPIN ? (
					<FormItem title="当前PIN码">
						<Password
							readOnly={isCurrentReadOnly}
							width={INPUT_WIDTH}
							value={formData.currentPIN}
							placeholder={'请输入当前PIN码'}
							showEye={false}
							onChange={(e, v) => {
								onInputChange(v, 'currentPIN')
							}}
							onBlur={(e, v) => {
								onInputBlur(v, 'currentPIN')
							}}
						/>
						{/* {formData.currentPINCheckIcon && (
							<p className={`check-wrap ${formData.currentPINCheckIcon}`}>
								<span className={`check-icon`} />
								<span className={`check-text`}>
									{formData.currentPINCheckIcon === 'right' && 'PIN码正确'}
									{formData.currentPINCheckIcon === 'error' && 'PIN码不一致'}
								</span>
							</p>
						)} */}
						{isShowRememberNewPIN === true && (
							<span className="bottom-tip warn-text">
								PIN码修改后，需使用新PIN码重新登录，请牢记新PIN码！
							</span>
						)}
					</FormItem>
				) : null}
				<FormItem title="新PIN码" className="newPIN-item-wrap">
					<Password
						readOnly={isNewPINReadOnly}
						width={INPUT_WIDTH}
						value={formData.newPIN}
						placeholder={'请输入新PIN码'}
						showEye={false}
						maxLength={16}
						onFocus={(e, v) => {
							onInputFocus(v, 'newPIN')
						}}
						onChange={(e, v) => {
							onInputChange(v, 'newPIN')
						}}
						onBlur={(e, v) => {
							onInputBlur(v, 'newPIN')
						}}
					/>
					<>
						{formData.newPIN && (
							<p className={`check-wrap ${formData.newPINCheckIcon}`}>
								<span className={`check-icon`} />
								<span className={`check-text`}>{formData.newPINCheckText}</span>
							</p>
						)}
					</>
					<span className="bottom-tip">{formData.newPINTip}</span>
				</FormItem>
				<FormItem title="确认PIN码">
					<Password
						readOnly={confirmPINReadOnly}
						width={INPUT_WIDTH}
						value={formData.confirmPIN}
						placeholder={'请输入确认新PIN码'}
						showEye={false}
						maxLength={16}
						onChange={(e, v) => {
							onInputChange(v, 'confirmPIN')
						}}
						onFocus={(e, v) => {
							onInputFocus(v, 'confirmPIN')
						}}
					/>
					<p className={`check-wrap ${formData.confirmPINCheckIcon}`}>
						<span className={`check-icon`} />
						<span className={`check-text`}>{formData.confirmPINCheckText}</span>
					</p>
				</FormItem>
			</Form>
		</StyledPIN>
	)
}

export default forwardRef(UpdatePINView)
